<script setup lang='ts'>
import { ref } from 'vue'
import ShowCase from './components/02_IfShowCase.vue'
import EventCase from './components/03_Vue3的事件传递参数.vue'
import BindCase from './components/04_Vue3的属性绑定.vue'
import ForCase from './components/05_Vue3的循环列表.vue'
import ModelCase from './components/06_Vue3的双向绑定.vue'
import ComputedCase from './components/07_Vue3的计算机属性.vue'
import WatchCase from './components/08_Vue3的Watch侦听器的用法.vue'
import LifeCase from './components/09_Vue3的生命周期的钩子函数.vue'
import LifeCase2 from './components/10_vue2的生命周期.vue'
// const showCom = ref(true)
// import RefCase from './components/11_通过ref获取dom元素.vue'
import ComprehensiveCase from './components/12_水果购物车综合案例.vue'
import Head from './components/13_Head.vue'
import Body from './components/13_Body.vue'
import Footer from './components/13_Footer.vue'
import Parent from './components/14_父子通信中的父组件.vue'
import GrandFather from './components/15_跨代传值爷爷组件.vue'
import SlotCase from './components/18_Vue3中的默认插槽.vue';
import HmTable from './components/19_Vue3中封装table组件.vue'
import EasyCase from './components/20_作用域插槽的简单版本.vue'
import { idText } from 'typescript'
type PersonColumnArr = Array<{ label: string, field: string }>
type personArr = Array<{ id: number, username: string, age: number }>
const columns: PersonColumnArr = [
  { label: '序号', field: 'id' },
  { label: '姓名', field: 'username' },
  { label: '年龄', field: 'age' },
  { label: '操作', field: '' },
]
const data = ref<personArr>([
  {
    id: 1,
    username: '张小华',
    age: 18
  },
  {
    id: 2,
    username: '高大明',
    age: 18
  },
  {
    id: 3,
    username: '刘德华',
    age: 49
  },
])
const delRow = (row: { id: number, username: string, age: number }) => {
  data.value = data.value.filter(item => item.id !== row.id)
}

</script>
<template>
  <!-- <ShowCase></ShowCase> -->
  <!-- <EventCase></EventCase> -->
  <!-- <BindCase></BindCase> -->
  <!-- <ForCase></ForCase> -->
  <!-- <ModelCase></ModelCase> -->
  <!-- <ComputedCase></ComputedCase> -->
  <!-- <WatchCase></WatchCase> -->
  <!-- <LifeCase v-if="showCom"></LifeCase>
  <LifeCase2></LifeCase2>
  <button @click="showCom = !showCom">创建/销毁</button> -->
  <!-- <RefCase></RefCase> -->
  <!-- <ComprehensiveCase></ComprehensiveCase> -->
  <!-- <div class="container">

    <Head></Head>
    <Body></Body>
    <Footer></Footer>

  </div> -->
  <!-- <Parent></Parent> -->
  <!-- <GrandFather></GrandFather> -->
  <!-- <SlotCase> -->
  <!-- 语法糖写法：将v-slot:head"写为#head -->
  <!-- <template #head></template> -->
  <!-- <template v-slot:head>
      <h1>头部内容</h1>
    </template>
    <template v-slot:body>
      <h1>身体内容</h1>
    </template>
    <template v-slot:footer>
      <h1>底部内容</h1>
    </template>
    <template #default>
      <h2>匿名的默认插槽</h2>
    </template>

  </SlotCase> -->
  <HmTable :columns="columns" :data="data">
    <template #row="obj">
      <button>编辑</button>
      <button @click="delRow(obj.row)">删除</button>
    </template>
  </HmTable>
  <EasyCase>
    <template #row="{ p }">
      <h2>姓名：{{ p.name }}-年龄：{{ p.age }}</h2>
    </template>
  </EasyCase>
</template>
<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
</style>
